<template>
  <div class="conflict-detection">
    <!-- 搜索表单 -->
<!--     <div class="search-form">
      <div class="form-row">
        <div class="form-item-inline">
          <label>检索关键词</label>
          <el-input
            v-model="searchForm.keywords"
            placeholder="请输入检索关键词"
            clearable
          />
        </div>
        <div class="form-item-inline">
          <label>检测状态</label>
          <el-select v-model="searchForm.status" placeholder="选择状态" clearable>
            <el-option label="进行中" value="in_progress" />
            <el-option label="已完成" value="completed" />
            <el-option label="已停止" value="stopped" />
          </el-select>
        </div>
        <div class="button-group">
          <el-button type="primary" @click="handleSearch" :icon="Search" class="search-btn">搜索</el-button>
          <el-button @click="handleReset" :icon="Refresh" class="reset-btn">重置</el-button>
        </div>
      </div>
    </div> -->

    <div style="margin-bottom: 20px;">
      <el-button type="success" @click="handleAdd" :icon="Plus" class="add-btn">新增检测</el-button>
    </div>
    <!-- 检测列表容器 -->
    <div class="detection-list">
      <div class="detection-table-wrapper">
        <div class="detection-table-scroll">
          <table class="detection-table">
            <thead class="table-header">
              <tr>
                <th class="col-id">检测名称</th>
                <th class="col-time">创建时间</th>
                <th class="col-scope">检索范围</th>
                <th class="col-status">检测状态</th>
                <th class="col-conflicts">冲突数量</th>
                <th class="col-creator">创建人</th>
                <th class="col-description">检测描述</th>
                <th class="col-action">操作</th>
              </tr>
            </thead>
            <tbody class="table-body" v-if="paginatedData.length > 0">
              <tr
                v-for="detection in paginatedData"
                :key="detection.id"
                class="table-row"
              >
                <td class="col-id">
                  <span :title="detection.task_name">{{ detection.task_name }}</span>
                </td>   
                <td class="col-time">
                  <span>{{ formatCreateTime(detection.created_at) }}</span>
                </td>
                <td class="col-scope">
                  <el-link type="primary" :underline="false" :title="detection.scope">{{ detection.scope }}</el-link>
                </td>
                <td class="col-status">
                  <el-tag :type="getStatusTagType(detection.self_status)" size="small">
                    {{ getStatusLabel(detection.self_status) }}
                  </el-tag>
                </td>
                <td class="col-conflicts">
                  <span v-if="detection.status === 'running' || detection.status === 'PENDING'">-</span>
                  <span v-else>{{ detection.conflictCount }}</span>
                </td>
                <td class="col-creator">
                  <span>{{ detection.creator }}</span>
                </td>
                <td class="col-description">
                  <span>{{ detection.description }}</span>
                </td>
                <td class="col-action">
                  <div class="action-buttons">
                    <el-button type="primary" size="small" plain @click="handleView(detection)" style="color: #a685ff; border-color: #a685ff; background-color: #f3f0ff;">
                      查看
                    </el-button>
                    <el-button type="primary" :disabled="true" size="small" plain @click="handleView(detection)" style="color: #a685ff; border-color: #a685ff; background-color: #f3f0ff;">
                      下载
                    </el-button>
                    <el-button 
                      :disabled="detection.status !== 'running'" 
                      type="warning" 
                      size="small" 
                      plain 
                      @click="handleStop(detection)"
                    >
                      停止检测
                    </el-button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

          <!-- 空状态 -->
          <div v-if="paginatedData.length === 0" class="empty-state">
            <el-empty description="暂无检测数据" />
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 - 右下角固定 -->
    <div class="pagination-fixed">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="filteredData.length"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        small
      />
    </div>

    <!-- 新增/编辑弹窗 -->
    <DetectionDialog
      v-model:visible="dialogVisible"
      :title="dialogTitle"
      :form-data="formData"
      @submit="handleDialogSubmit"
      @cancel="handleDialogCancel"
    />

    <!-- 冲突详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="冲突检测详情"
      width="80%"
      :before-close="handleDetailClose"
      class="conflict-detail-dialog"
    >
      <div class="conflict-detail-container">
        <!-- 基本信息 -->
        <div class="conflict-summary">
          <h3>检测概览</h3>
          <!-- <p><strong>关键词：</strong>{{ detailConflictInfo.keywords }}</p> -->
          <p><strong>检索范围：</strong>{{ detailConflictInfo.scope }}</p>
          <p><strong>冲突数量：</strong>{{ detailConflictInfo.conflictCount }}</p>
          <p><strong>检测结果：</strong>{{ detailConflictInfo.summary }}</p>
        </div>

        <!-- 冲突详情列表 -->
        <div class="conflicts-list" v-if="detailConflicts.length > 0">
          <div 
            v-for="(conflict, index) in detailConflicts" 
            :key="conflict.id"
            class="conflict-item"
          >
            <div class="conflict-header">
              <h3>冲突{{ index + 1 }}</h3>
              <p class="conflict-topic">{{ conflict.topic }}</p>
              <p class="conflict-description">{{ conflict.description }}</p>
            </div>
            
            <div class="conflict-content">
              <div class="document-section">
                <h4>当前文档</h4>
                <div class="document-info">
                  <p><strong>章节：</strong>{{ conflict.current_chapter }}</p>
                  <!-- <p><strong>描述：</strong>{{ conflict.phrase_a }}</p> -->
                  <div class="html-content" v-html="conflict.current_content"></div>
                </div>
              </div>
              <div class="document-section">
                <h4>冲突文档</h4>
                <div class="document-info">
                  <p><strong>文件名：</strong>{{ conflict.collide_file_name }}</p>
                  <p><strong>章节：</strong>{{ conflict.collide_chapter }}</p>
                  <!-- <p><strong>描述：</strong>{{ conflict.phrase_b }}</p> -->
                  <div class="html-content" v-html="conflict.collide_content"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="no-conflicts">
          <p>暂无冲突详情</p>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDetailClose">关闭</el-button>
          <!-- <el-button type="primary" @click="handleDetailExport">导出报告</el-button> -->
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus } from '@element-plus/icons-vue'
import DetectionDialog from './components/DetectionDialog.vue'
import ConflictDetailDialog from './components/ConflictDetailDialog.vue'
import { formatCreateTime } from '@/utils/dateFormat'
import { 
  getConflictDetectionList, 
  stopConflictDetection, 
  deleteConflictDetection,
  getCheckDetail,
  type ConflictDetectionTask,
  type GetConflictDetectionListParams
} from '@/api/conflictDetection'

// 使用API接口定义
type DetectionItem = ConflictDetectionTask



// 搜索表单
const searchForm = ref({
  keywords: '',
  status: ''
})

// 检测数据
const detectionData = ref<DetectionItem[]>([
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)

// 弹窗相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData = ref<{
  keywords: string[]
  scope: string[]
  selectedKnowledge: string[]
}>({
  keywords: [],
  scope: [],
  selectedKnowledge: []
})

// 详情弹窗相关
const detailDialogVisible = ref(false)
const detailConflictInfo = ref({
  keywords: '',
  scope: '',
  conflictCount: 0,
  summary: ''
})
const detailConflicts = ref<any[]>([])

// 过滤后的数据
const filteredData = computed(() => {
  let data = detectionData.value

  if (searchForm.value.keywords) {
    data = data.filter(item => 
      item.keywords.toLowerCase().includes(searchForm.value.keywords.toLowerCase())
    )
  }

  if (searchForm.value.status) {
    data = data.filter(item => item.status === searchForm.value.status)
  }

  return data
})

// 分页后的数据
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredData.value.slice(start, end)
})

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  switch (status) {

    case 'AWAITING_CONFIRMATION':
      return 'info'
    case 'PENDING':
      return 'info'
    case 'RUNNING':
      return 'warning'
    case 'CONFIRMED':
      return 'success'
    case 'FAILED':
      return 'danger'
    case 'CANCELLED':
      return 'info'
   case 'SUCCESS ':
    return 'success'
  }
}

// 获取状态标签文本
const getStatusLabel = (status: string) => {
  switch (status) {
    case 'AWAITING_CONFIRMATION':
      return '待确认'
    case 'PENDING':
      return '等待中'
    case 'RUNNING':
      return '检测中'
    case 'CONFIRMED':
      return '已确认'
    case ' FAILED':
      return '已失败'
    case 'SUCCESS':
      return '成功'
    case 'FAILED':
      return '失败'
    default:
      return '未知'
  }
}

// 搜索
const handleSearch = async () => {
  currentPage.value = 1
  await loadConflictDetectionList()
}

// 重置
const handleReset = async () => {
  searchForm.value = {
    keywords: '',
    status: ''
  }
  currentPage.value = 1
  await loadConflictDetectionList()
}

// 新增
const handleAdd = () => {
  formData.value = {
    keywords: [],
    scope: [],
    selectedKnowledge: []
  }
  dialogTitle.value = '新增检测'
  dialogVisible.value = true
}

// 查看
const handleView = async (detection: DetectionItem) => {
  try {
    // 调用API获取检测详情
    const response = await getCheckDetail(detection.id.toString())
    console.log('API响应:', response)
    
    // 设置详情弹窗数据
    detailDialogVisible.value = true
    
    // 设置基本信息
    detailConflictInfo.value = {
      keywords: detection.keywords,
      scope: detection.scope,
      conflictCount: response?.length || 0,
      summary: `检测到 ${response?.length || 0} 个冲突，涉及多个文档的逻辑冲突`
    }
    
    // 设置冲突数据
    detailConflicts.value = response || []
    
  } catch (error) {
    console.error('获取检测详情失败:', error)
    ElMessage.error('获取检测详情失败')
  }
}

// 停止检测
const handleStop = async (detection: DetectionItem) => {
  try {
    await ElMessageBox.confirm(
      `确定要停止检测"${detection.keywords}"吗？`,
      '确认停止',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 更新状态
    const index = detectionData.value.findIndex(item => item.id === detection.id)
    if (index !== -1) {
      detectionData.value[index].status = 'stopped'
    }

    ElMessage.success('停止成功')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('停止检测失败:', error)
      ElMessage.error('停止失败')
    }
  }
}

// 弹窗提交
const handleDialogSubmit = async (data: any) => {
  try {
    await loadConflictDetectionList()
    ElMessage.success('添加成功')
    dialogVisible.value = false
  } catch (error) {
    console.error('添加检测失败:', error)
    ElMessage.error('添加失败')
  }
}

// 弹窗取消
const handleDialogCancel = () => {
  dialogVisible.value = false
}

// 详情弹窗关闭
const handleDetailClose = () => {
  detailDialogVisible.value = false
}

// 详情弹窗导出
const handleDetailExport = () => {
  ElMessage.success('冲突检测报告导出成功')
}

// 分页大小改变
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
}

// 当前页改变
const handleCurrentChange = (page: number) => {
  currentPage.value = page
}

// 加载数据
const loading = ref(false)

// 获取冲突检测列表
const loadConflictDetectionList = async () => {
  try {
    loading.value = true
    const params: GetConflictDetectionListParams = {
      page: currentPage.value,
      page_size: pageSize.value
    }
    
    const response:any = await getConflictDetectionList(params)
    
    // request工具返回的是处理后的数据
    detectionData.value = response?.items || []
    console.log('冲突检测列表加载成功:', response)
  } catch (error) {
    console.error('加载冲突检测列表失败:', error)
    ElMessage.error('加载失败')
  } finally {
    loading.value = false
  }
}

// 初始化数据
onMounted(async () => {
  await loadConflictDetectionList()
})
</script>

<style scoped>
.conflict-detection {
  padding: 24px;
  background: #f8fafc;
}

/* 搜索表单样式 */
.search-form {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.form-item-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

.form-item-inline label {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.button-group {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.search-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
}

.reset-btn {
  background: #f1f5f9;
  border: 1px solid #d1d5db;
  color: #6b7280;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
}
.add-btn {
  background: linear-gradient(90deg, rgb(91, 124, 255) 0%, rgb(166, 133, 255) 100%);
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 检测列表样式 - 用户管理风格 */
.detection-list {
  flex: 1;
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 24px;
}

/* 表格包装器 */
.detection-table-wrapper {
  flex: 1;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

/* 表格滚动容器 */
.detection-table-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* 滚动条样式 */
.detection-table-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.detection-table-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.detection-table-scroll::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.detection-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.detection-table-scroll::-webkit-scrollbar-corner {
  background: #f1f5f9;
}

/* 表格样式 */
.detection-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  min-width: 1200px;
  table-layout: fixed;
}

/* 表头样式 */
.table-header {
  background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
  border-bottom: 1px solid #c7d2fe;
  color: #4338ca;
  font-size: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-header th {
  padding: 16px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.table-header th:last-child {
  border-right: none;
}

/* 表格主体 */
.table-body tr {
  transition: background-color 0.2s;
}

.table-body tr:hover {
  background: #f8fafc;
}

.table-body tr:last-child {
  border-bottom: none;
}

.table-body td {
  padding: 16px 12px;
  vertical-align: middle;
  white-space: nowrap;
}

.table-body td:last-child {
  border-right: none;
}

/* 列宽定义 */
.col-id { width: 160px; }
.col-time { width: 160px; }
.col-keywords { width: 200px; }
.col-scope { width: 120px; }
.col-status { width: 100px; }
.col-conflicts { width: 100px; }
.col-creator { width: 100px; }
.col-description { width: 300px; }
.col-action {
  width: 240px !important;
  position: sticky;
  right: 0;
  background: inherit;
  z-index: 5;
}

/* 文本截断样式 */
.col-scope .el-link,
.col-description span,
.col-creator span,
.col-id span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 检测名称列样式 */
.col-id {
  max-width: 250px;
}

/* 操作列固定样式 */
.table-header .col-action {
  background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.table-body .col-action {
  background: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.table-body tr:hover .col-action {
  background: #f8fafc;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.action-buttons .el-button {
  padding: 6px 16px;
  font-size: 12px;
  border-radius: 6px;
  white-space: nowrap;
}

/* 禁用状态的按钮样式 */
.action-buttons .el-button.is-disabled {
  color: #c0c4cc !important;
  border-color: #e4e7ed !important;
  background: #f5f7fa !important;
  cursor: not-allowed !important;
}

.action-buttons .el-button.is-disabled:hover {
  color: #c0c4cc !important;
  border-color: #e4e7ed !important;
  background: #f5f7fa !important;
}

/* 空状态样式 */
.empty-state {
  padding: 60px 20px;
  text-align: center;
}

/* 分页样式 - 右下角固定 */
.pagination-fixed {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  background: white;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e7eb;
}

.pagination-fixed :deep(.el-pagination) {
  margin: 0;
}

.pagination-fixed :deep(.el-pagination .el-pager li) {
  background: transparent;
  border-radius: 6px;
  margin: 0 2px;
  transition: all 0.2s;
}

.pagination-fixed :deep(.el-pagination .el-pager li:hover) {
  background: #f3f4f6;
}

.pagination-fixed :deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.pagination-fixed :deep(.el-pagination .btn-prev),
.pagination-fixed :deep(.el-pagination .btn-next) {
  border-radius: 6px;
  transition: all 0.2s;
}

.pagination-fixed :deep(.el-pagination .btn-prev:hover),
.pagination-fixed :deep(.el-pagination .btn-next:hover) {
  background: #f3f4f6;
}

/* 标签样式优化 */
:deep(.el-tag) {
  border-radius: 6px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .form-row {
    gap: 16px;
  }

  .form-item-inline {
    min-width: 180px;
  }

  .form-item-inline .el-input,
  .form-item-inline .el-select {
    width: 140px;
  }

  .button-group {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .conflict-detection {
    padding: 16px;
  }

  .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .form-item-inline {
    min-width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .form-item-inline label {
    min-width: auto;
  }

  .form-item-inline .el-input,
  .form-item-inline .el-select {
    width: 100%;
  }

  .button-group {
    margin-left: 0;
    flex-direction: column;
    gap: 8px;
  }

  .search-btn,
  .reset-btn,
  .add-btn {
    width: 100%;
  }

  .list-header,
  .list-row {
    padding: 12px 16px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .pagination-fixed {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
}

/* 冲突详情对话框样式 */
.conflict-detail-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

.conflict-detail-dialog :deep(.el-dialog__header) {
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.conflict-detail-dialog :deep(.el-dialog__body) {
  padding: 0;
  flex: 1;
  overflow-y: auto;
  height: calc(85vh - 120px);
}

.conflict-detail-dialog :deep(.el-dialog__footer) {
  padding: 0;
}

.conflict-detail-dialog :deep(.el-dialog__headerbtn) {
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.conflict-detail-dialog :deep(.el-dialog__headerbtn:hover) {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.conflict-detail-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  font-size: 18px;
  font-weight: bold;
}

/* 冲突详情样式 */
.conflict-detail-container {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
  background: #f8fafc;
}

.conflict-summary {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  padding: 24px;
  border-radius: 16px;
  margin-bottom: 24px;
  border-left: 4px solid #667eea;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}

.conflict-summary h3 {
  margin: 0 0 20px 0;
  color: #374151;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.conflict-summary h3::before {
  content: "📊";
  font-size: 20px;
  color: #667eea;
}

.conflict-summary p {
  margin: 12px 0;
  font-size: 14px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
}

.conflict-summary strong {
  color: #374151;
  font-weight: 600;
  min-width: 80px;
}

.conflicts-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.conflict-item {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.3s ease;
}

.conflict-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.conflict-header {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.conflict-header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(20px, -20px);
}

.conflict-header h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.conflict-header h3::before {
  content: "⚠️";
  font-size: 24px;
}

.conflict-topic {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.95;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #ffd700;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin-bottom: 12px;
}

.conflict-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.8;
  position: relative;
  z-index: 1;
}

.conflict-content {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.document-section {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  height: fit-content;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.document-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  border-bottom: 2px solid #667eea;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.document-section h4::before {
  content: "📄";
  font-size: 18px;
  color: #667eea;
}

.document-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.document-info p {
  margin: 8px 0;
  font-size: 14px;
  color: #6b7280;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.document-info strong {
  color: #374151;
  font-weight: 600;
  min-width: 60px;
  flex-shrink: 0;
}

.content-preview {
  margin-top: 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.highlighted-text {
  margin-top: 12px;
  padding: 10px;
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #856404;
  font-weight: 500;
}

.html-content {
  margin-top: 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
  flex: 1;
  min-height: 200px;
}

.html-content :deep(p) {
  margin: 8px 0;
}

.html-content :deep(span) {
  background-color: #fef2f2;
  color: #dc2626;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: bold;
}

.no-conflicts {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
  font-size: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 24px 32px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .conflict-detail-dialog :deep(.el-dialog) {
    width: 95% !important;
    margin: 5vh auto;
  }

  .conflict-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .conflict-header {
    padding: 16px;
  }
  
  .conflict-content {
    padding: 16px;
  }

  .conflict-detail-container {
    padding: 16px;
  }

  .dialog-footer {
    padding: 16px 20px;
    flex-direction: column;
  }
}

@media (max-width: 1024px) {
  .conflict-detail-dialog :deep(.el-dialog) {
    width: 90% !important;
  }
}
</style>
